<script setup>
import { nextTick, ref } from 'vue';
import { service, common } from '@utils';
import { useRouter } from 'vue-router';

const router = useRouter();

const pageRef = ref();
const tableRef = ref();

const visible = ref(false);
const accountNo = ref();

const open = value => {
    accountNo.value = value;
    visible.value = true;
    nextTick(() => {
        pageRef.value.refresh();
    });
};

const close = () => {
    visible.value = false;
    accountNo.value = null;
};

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.fund.fundBills(pageNum, pageSize, { accountNo: accountNo.value });
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};

const showOrder = row => {
    router.push({ path: '/order/bfqzOrder/list', query: { orderId: row.orderId } });
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <el-dialog v-model="visible" width="80%" title="流水明细" center @close="close" destroy-on-close>
        <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
            <template v-slot:default="props">
                <vxe-table class="mytable-scrollbar" ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, 1, 100)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="companyName" title="所属商户" width="200" />
                    <vxe-column title="金额" width="180">
                        <template #default="{ row }">
                            <span :style="{ color: row.balanceType === 1 || row.balanceType === 4 ? 'green' : 'red' }">{{ row.balanceType === 1 || row.balanceType === 4 ? '+' : '-' }}{{ row.balanceAmount }}</span>
                        </template>
                    </vxe-column>
                    <vxe-column title="交易后金额" width="180">
                        <template #default="{ row }">{{ row.afterBalanceAmount }}</template>
                    </vxe-column>
                    <vxe-column field="balanceDirectionDesc" title="来源或去路" width="120">
                        <template #default="{ row }">
                            <span :style="{ color: row.balanceType === 1 || row.balanceType === 4 ? 'green' : 'red' }">
                                <span v-if="row.balanceType <= 2">{{ row.balanceType == 1 ? '流入' : '流出' }}</span>
                                <span v-if="row.balanceType > 2">{{ row.balanceType == 3 ? '冻结' : '解冻' }}</span>
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column field="balanceNo" title="流水号" width="200" />
                    <vxe-column field="bizTypeDesc" title="科目" width="160" />
                    <vxe-column title="相关订单号" width="160">
                        <template #default="{ row }">
                            <div class="color-theme underline cursor" @click="showOrder(row)">{{ row.orderId }}</div>
                        </template>
                    </vxe-column>
                    <vxe-column field="userName" title="用户姓名" width="160" />
                    <vxe-column field="createTime" title="生成时间" width="160" />
                </vxe-table>
            </template>
        </page-wrapper>
    </el-dialog>
</template>

<style lang="scss" scoped>
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
    background-color: #ffffff;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
    background-color: #ffffff;
}
</style>
